<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Processing Helper</title>
    <style>
      canvas { width: 100px; height: 100px; border: 1px solid }
    </style>
  </head>
  <body onload="document.getElementById('code').focus()">
    <h1>Processing Helper</h1>
    <p>Paste your Processing code below and execute whichever options you require:</p>

    <h2>Processing Code</h2>
    <textarea rows="20" cols="80" id="code"></textarea>
    <br>  <input onclick="runSketch();" type="button" value="Run"></input>
    &nbsp;<input onclick="convertToJS();" type="button" value="Convert to JS"></input>
    &nbsp;<input onclick="generateDataURI();" type="button" value="Generate Data URI"></input>

    <h2>Canvas</h2>
    <div id="sketch-container">
      <canvas id="sketch"></canvas>
    </div>

    <h2>Output</h2>
    <textarea rows="20" cols="80" id="output" readonly="readonly">None.</textarea>

    <script src="../../processing.min.js"></script>
    <script src="jsbeautify.js"></script>
    <script src="processing-helper.js"></script>
  </body>
</html>
